<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>请假信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-row" id="leaveDetail" style="display:none;">
    <table class="layui-table" lay-even="" lay-skin="nob">
        <colgroup>
            <col width="100">
            <col width="100">
            <col width="200">
            <col width="100">
        </colgroup>
        <thead>
        <th>状态</th>
        <th>审批人</th>
        <th>审批意见</th>
        <th>结果</th>
        </thead>
        <tbody id="details"></tbody>
    </table>
</div>

<div class="layui-row" id="auditLeave" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="editForm" action="" style="margin-top:20px">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="auditName" id="auditName" readonly="readonly" required
                           lay-verify="required" autocomplete="off"
                           placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <!--            请假类型-->
            <div class="layui-form-item">
                <label class="layui-form-label">请假类型</label>
                <div class="layui-input-block">
                    <input type="text" name="auditName" id="auditLeaveType" readonly="readonly" required
                           lay-verify="required" autocomplete="off"
                           placeholder="请输入请假类型" class="layui-input">
                </div>
            </div>
            <!--            请假时间范围-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请假时间</label>
                    <div class="layui-inline" id="test6">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="auditBeginTime" readonly="readonly"
                                   class="layui-input" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="auditEndTime" readonly="readonly"
                                   class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">请假缘由</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="auditReason" readonly="readonly"
                              class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">审批意见</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="opinion"
                              class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">审批结果</label>
                <div class="layui-input-block">
                    <input type="radio" name="result" value="1" title="同意" checked="">
                    <input type="radio" name="result" value="2" title="不同意">
                </div>
            </div>
        </form>
    </div>
</div>

<div class="actBar" style="margin-left: 400px;">
    <button class="layui-btn layui-btn-primary screening">
        状态
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
</div>
<table class="layui-table" lay-data="{ url:'/leave/findAll', page:true, id:'leaveList'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{type: 'checkbox', width: 40, fixed: 'left'}"></th>
        <th lay-data="{field:'id', align:'center', width:60, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'name', align:'center', width:80}">姓名</th>
        <th lay-data="{field:'sex', align:'center', width:60, templet:  function(d){if(d.sex == 1){return '男'}else{return '女'}}}">
            性别
        </th>
        <th lay-data="{field:'num', align:'center', width:150, sort: true}">学号</th>
        <th lay-data="{field:'banZhuRenName', align:'center', width:80}">班主任</th>
        <th lay-data="{field:'leaveType', align:'center', width:150, templet:  function(d){if(d.leaveType == 1){return '市内一天'}else{return '市内多天或市外'}}}">
            请假类型
        </th>
        <th lay-data="{field:'reason', align:'center', width:150, hide:true}">外出事由</th>
        <th lay-data="{field:'beginTime', align:'center', width:200}">开始时间</th>
        <th lay-data="{field:'endTime', align:'center', width:200}">结束时间</th>
        <th lay-data="{field:'status', align:'center', width:100, templet:  function(d){if(d.status == 1){return '待审批'}else if(d.status == 2){return '待销假'}else if(d.status == 3){return '申请销假'}else if(d.status == 4){return '请到学生科销假'}else{return '已归档'}} }">
            状态
        </th>


        <th lay-data="{fixed: 'right', align:'center', width:150, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <shiro:hasPermission name="leave:audit">
        <a class="layui-btn layui-btn-xs" lay-event="audit">审批</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="leave:details">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">详情</a>
    </shiro:hasPermission>

</script>


<script src="../static/layui/layui.js" charset="utf-8"></script>
<script src="../static/js/jquery.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    //获取选中ID

    layui.use(['dropdown', 'form', 'layer', 'table', 'upload'], function () {
        var table = layui.table
            , form = layui.form, upload = layui.upload, layer = layui.layer, dropdown = layui.dropdown;
        dropdown.render({
            elem: '.screening'
            , data: [{
                title: '待审批'
                , status: 1
            }, {
                title: '待销假'
                , status: 2
            }, {
                title: '申请销假'
                , status: 3
            }, {
                title: '请到学生科销假'
                , status: 4
            }, {
                title: '已归档'
                , status: 5
            }]
            , click: function (obj) {
                /*layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
                alert(obj.status);*/
                //执行重载
                table.reload('leaveList', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        status: obj.status
                    }
                });
            }
        });
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "查看详情信息",
                    area: ['500px', '300px'],
                    offset: '100px',
                    content: $("#leaveDetail"),
                    success: function (layero, index) {
                        $.ajax({
                            url: '/leave/detail?id=' + data.id,
                            type: "get",
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 200) {
                                    let details = $("#details");
                                    let resData = res.data;
                                    for (let i = 0; i < resData.length; i++) {
                                        let status = resData[i].status;
                                        let username = resData[i].username;
                                        let opinion = resData[i].opinion;
                                        let result = resData[i].result === 1 ? '同意' : '不同意';
                                        let tr = `<tr>
                                                    <td>` + status + `</td>
                                                    <td>` + username + `</td>
                                                    <td>` + opinion + `</td>
                                                    <td>` + result + `</td>
                                                 </tr>`
                                        details.append(tr);
                                    }

                                } else {
                                    layer.msg("查找详情失败", {
                                        icon: 5
                                    });
                                }
                            }
                        });

                    }
                    , end: function () {
                        $("#details").find("tr").remove();
                        $("#leaveDetail").attr("style", "display:none;");
                    }
                });
            } else if (obj.event === 'audit') {
                let status = obj.data.status;
                if (status === 2 || status === 5) {
                    layer.msg(status === 2 ? "等待学生销假，不可处理" : "已归档，不可处理", {
                        icon: 5
                    });
                    return;
                }
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "审批请假信息",
                    area: '700px',
                    content: $("#auditLeave")//引用的弹出层的页面层的方式加载审批界面表单
                    , btn: ['确定', '取消'],
                    success: function (layero, index) {
                        $("#auditName").val(data.name);
                        $("#auditLeaveType").val(data.leaveType === 1 ? "市内一天" : "市内多天或市外");
                        $("#auditBeginTime").val(data.beginTime);
                        $("#auditEndTime").val(data.endTime);

                        $("#auditReason").val(data.reason);
                        form.render();

                    },
                    btn1: function (index, layero) {
                        $.ajax({
                            url: '/leave/audit',
                            type: "post",
                            dataType: "json",
                            data: {
                                id: data.id,
                                opinion: $("#opinion").val(),
                                result: $("input[name='result']:checked").val()
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    obj.update({
                                        status: res.data[0]
                                    });
                                    table.render();
                                    layer.close(index);
                                    console.log(index);
                                    layer.msg("更新状态成功", {
                                        icon: 1
                                    });
                                } else {
                                    layer.msg("更新状态失败", {
                                        icon: 5
                                    });
                                }
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        $("#auditLeave").attr("style", "display:none;");
                    }
                    , end: function () {
                        // $("#auditName").val('');
                        // $("#editNum").val('');
                        $("#editForm")[0].reset();
                        $("#auditLeave").attr("style", "display:none;");
                    }
                });
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                // setFormValue(obj, data);
            }
        });
    });
</script>

</body>
</html>